<template>
<!--  每个页面共有的： 头部和尾部  -->
  <div class="home">
    <el-container>
      <!--  1.开头  -->
      <el-header style="height: 80px;background-color: white">
        <!--  width: 1200px;是让div接近屏幕宽度，
        margin: 0  auto; 是让div居中(上下外边距为0，左右外边距为auto自动居中)(主要是为了让img所属的row居中)  -->
        <div style="width: 1200px;margin: 0  auto;">
          <el-row :gutter="20">
            <el-col :span="6">
              <a href="javascript:void(0)" @click="home()">
                <!--  点击网站logo图标时执行此方法进入首页。 注： 如果href=/则会刷新整个首页页面  -->
                <img src="/imgs/icon.png" width="200" alt="logo">
              </a>
            </el-col>
            <el-col :span="10">
              <el-menu mode="horizontal" active-text-color="orange">
                <el-menu-item index="1" class="el-menu-item">首页</el-menu-item>
                <el-menu-item index="2">食谱</el-menu-item>
                <el-menu-item index="3">视频</el-menu-item>
                <el-menu-item index="4">资讯</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6">
              <el-input style="position: relative;top: 18px" v-model="wd"  placeholder="请输入搜索内容" class="el-input">
                <el-button slot="append" @click="search()" icon="el-icon-search" >搜索</el-button>
              </el-input>
            </el-col>
            <el-col :span="2">
              <!--  Popover 弹出框  v-if="user==null"标识如果user为null，则未登录就显示登录和注册按钮  -->
              <el-popover v-if="user==null"
                  placement="top-start"
                  title="欢迎来到烘焙坊"
                  width="200"
                  trigger="hover">
                <i slot="reference" style="font-size: 30px; position: relative; top: 20px" class="el-icon-user"></i>
                <el-button type="info" @click="reg()">注册</el-button>
                <el-button type="warning" @click="login()">登录</el-button>
                <!--  style="position: relative; top: 10px"  -->
              </el-popover>

              <!--  如果用户登录了则显示用户头像el-avatar和退出登录链接和后台管理 链接  -->
              <el-popover v-else
                          placement="top-start"
                          title="欢迎来到烘焙坊"
                          width="200"
                          trigger="hover">
                <i slot="reference" style="font-size: 30px; position: relative; top: 20px" class="el-icon-user"></i>
                <!--  style="position: relative; top: 10px"  -->
                <div style="text-align: center">
                  <!-- <el-avatar :src="'http://localhost:8088/'+user.imgUrl"></el-avatar>-->
                  <el-avatar :src="BASE_URL+user.imgUrl"></el-avatar>
                  <a href="javascript:(0)" @click="personal()">个人中心</a>
                  <a href="javascript:(0)" @click="logout()">退出登录</a>
                  <a v-if="user.isAdmin===1" @click="admin()"></a>
                </div>
              </el-popover>

            </el-col>
          </el-row>
        </div>
      </el-header>
      <!-- 2.页面中间部分 -->
      <el-main>
        <router-view/>
      </el-main>
      <!-- 3.页面尾部   -->
      <el-footer style="background-color: black;height: 280px;padding: 50px 0">
        <div style="width: 1200px;margin: 0 auto">
          <el-row>
            <el-col :span="8">
              <img src="/imgs/icon.png">
              <p>教程灵感就看烘焙坊</p>
              <p>烘焙行业网络社区平台</p>
              <p>全国百城上千个职位等你来</p>
            </el-col>
            <el-col :span="8">
              <el-row id="footer_center">
                <el-col :span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p>
                  <p>烘焙食谱</p>
                  <p>分类信息</p>
                  <p>求职招聘</p>
                  <p>社区交流</p>
                  <p>我要投稿</p>
                </el-col>
                <el-col :span="8">
                  <h3>服务与支持</h3>
                  <p>联系我们</p>
                  <p>广告投放</p>
                  <p>用户协议</p>
                  <p>友情链接</p>
                  <p>在线反馈</p>
                </el-col>
                <el-col :span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p>
                  <p>手机版</p>
                  <p>小黑屋</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <p style="font-size: 60px;margin: 0">
                <span style="color: orange">烘焙</span>坊
              </p>
              <p>烘焙行业社区平台</p>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data(){
    return {// 为null是没登录， 如果登录了则用JSON.parse将其转化为js对象
      user: localStorage.user?JSON.parse(localStorage.user):null,
      wd:''
    }
  },
  methods: {
    home(){//点击网站logo图标时执行此方法进入首页
      this.$router.push('/index');//这样写之后在点击时就不会刷新页面了
    },
    personal(){
      this.$router.push('/personal/index')
    },
    logout(){
      if(confirm("您确定要退出登录吗？")){
        localStorage.clear();
        location.href="/";//返回首页
        // 这里返回首页如果采用this.$router.push()方式只会改变router-view标签部分的内容，上边下边共同的部分不会改变(只让中间的router-view标签部分变成了首页内容)。
        // 还有一个问题就是：如果采用this.$router.push()方式页面上边的个人头像不会发生变化(实际上应该是点击了退出登录链接，个人头像应该不显示而显示登录注册按钮)
      }
    },
    admin(){

    },
    handleSelect(key,keyPath){
      if(key==0){
        this.$router.push('/index');
      }
    },
    reg(){
      /*//location.href="/reg";//这种跳转方式会导致页面刷新，浪费资源(不推荐)，所以用下面的路由跳转方式
      this.$router.push('/reg');//脚手架开发中使用这种路由跳转方式更新页面的一部分*/
      if(this.$route.path!=='/reg') {
        //location.href="/reg";//这种跳转方式会导致页面刷新，浪费资源(不推荐)，所以用下面的路由跳转方式
        this.$router.push('/reg');//脚手架开发中使用这种路由跳转方式更新页面的一部分
      }
    },
    login(){
      /*//location.href="/login";//这种跳转方式会导致页面刷新，浪费资源(不推荐)，所以用下面的路由跳转方式
      this.$router.push('/login');//脚手架开发中使用这种路由跳转方式更新页面的一部分
      //但是此时如果连续点击登录按钮或注册按钮，会报错。所以要先判断用户是否已经登录，如果登录了，就直接跳转到首页，否则再跳转到登录页面*/
      if(this.$route.path!=='/login'){
        this.$router.push('/login');//脚手架开发中使用这种路由跳转方式更新页面的一部分
        //但是此时如果连续点击登录按钮或注册按钮，会报错。所以要先判断用户是否已经登录，如果登录了，就直接跳转到首页，否则再跳转到登录页面
      }
    },
    search(){
       if(this.$route.path!=='/list'){
         //从A页面到B页面，点击后退可以回到A页面。从A到A会报错(所以要加if判断)
         this.$router.push('/list');
       }

      //从A页面到B页面，点击后退不能回到A页面。
      //this.$router.replace("/list")
    }
  },
  components: {
    HelloWorld
  }
}

</script>

<style>
#footer_center p{margin: 0}
#footer_center h3{color: white;}
</style>
